<template>
	<view class="me">
		<u-toast ref="uToast"></u-toast>
		<view class="me-header">
			<view class="me-header-config">
				<image src="../../static/con(1).png"></image>
				<image src="../../static/sh.png"></image>
			</view>
			<view class="me-header-nick" @click="login">
				<view class="me-image">
					<image :src="status?userInfo.avatar:'../../static/avatar.png'" mode=""></image>
				</view>
				<view class="me-login">
					<view class="me-login-text">
						{{ status? userInfo.nickName : '点击登录' }}
					</view>
					<view class="me-login-msg">
						{{ status? '编辑资料' : "登录同步数据,学习更安心"}}
					</view>
				</view>
			</view>
			<view class="me-header-vip">
				<view class="me-vip">
					<image src="../../static/vip.png" mode=""></image>
					<view class="">VIP会员</view>
				</view>
				<view class="me-vip-text">
					<view class="">开通小鹿线学习平台</view>
					<view class="">VIP会员尽享优质课程</view>
				</view>
				<view class="me-vip-button">
					<view class="">立即开通</view>
				</view>
			</view>
		</view>
		<view class="me-container">
			<view class="me-list-item">
				<view>
					<view class="list-l" @click="cart">
						<u-icon name='photo' size='16'></u-icon>
						<text>
							购物车
						</text>
					</view>
					<view class="list-r">
						<u-icon name='arrow-right' size='16'></u-icon>
					</view>
				</view>
				<view>
					<view class="list-l">
						<u-icon name='photo' size='16'></u-icon>
						<text>
							我的订单
						</text>
					</view>
					<view class="list-r">
						<u-icon name='arrow-right' size='16'></u-icon>
					</view>
				</view>
				<view>
					<view class="list-l">
						<u-icon name='photo' size='16'></u-icon>
						<text>
							我的余额
						</text>
					</view>
					<view class="list-r">
						<u-icon name='arrow-right' size='16'></u-icon>
					</view>
				</view>
				<view>
					<view class="list-l">
						<u-icon name='photo' size='16'></u-icon>
						<text>
							电子兑换码
						</text>
					</view>
					<view class="list-r">
						<u-icon name='arrow-right' size='16'></u-icon>
					</view>
				</view>
			</view>
			<view class="me-list-about">
				<view>
					<view class="list-l">
						<u-icon name='photo' size='16'></u-icon>
						<text>
							关于我们
						</text>
					</view>
					<view class="list-r">
						<u-icon name='arrow-right' size='16'></u-icon>
					</view>
				</view>
			</view>
			<view class="me-list-out" v-if="status" @click='loginOut'>
				<view>
					退出登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInfo,
		logout
	} from '@/api/login.js'
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		methods: {
			...mapMutations(['setUserInfo', 'ClearUser']),
			login() {
				if(this.status) return true;
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 退出登录
			loginOut() {
				logout().then(data => {
					this.ClearUser()
					this.$refs.uToast.show({
						message: '退出登录',
						type: 'success'
					})
				})
			},
			cart(){
				console.log(1);
				uni.navigateTo({
					url: '/pages/cart/cart'
				})
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				status: state => state.user.status
			})
		},
		onShow() {
			getInfo().then(data => {
				this.setUserInfo(data.data)
				console.log(data);
			})
		}
	}
</script>

<style>
	body {
		overflow: hidden;
	}

	.me {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(245, 245, 245, 0.39);
		overflow: hidden;
	}

	.me-header-config {
		display: flex;
		flex-direction: row-reverse;
		padding: 28rpx 0;
	}

	.me-header-config image {
		width: 42rpx;
		height: 42rpx;
	}

	.me-header-config image:first-child {
		margin-left: 49rpx;
		margin-right: 39rpx;
	}

	.me-header-nick {
		display: flex;
		padding: 0 32rpx;
	}

	.me-image {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}

	.me-image image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.me-login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 27rpx;
	}

	.me-login-text {
		font-size: 38rpx;
		font-weight: bold;
		color: #343234;
	}

	.me-login-msg {
		font-size: 24rpx;
		font-weight: 400;
		color: #919294;
		padding-top: 10rpx;
	}

	.me-header-vip {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 167rpx;
		margin: 35rpx 32rpx;
		background: url('../../static/me-bg.png');
		background-size: 100% 100%;
	}

	.me-vip {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.me-vip:after {
		content: '';
		position: absolute;
		right: -25rpx;
		top: 50%;
		margin-top: -29rpx;
		width: 4rpx;
		height: 58rpx;
		background-color: #fff;
	}

	.me-vip image {
		width: 79rpx;
		height: 57rpx;
	}

	.me-vip view {
		margin-top: 7rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.me-vip-text view:first-child {
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.me-vip-text view:last-child {
		margin-top: 4rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.me-vip-button {
		width: 163rpx;
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		background: url('../../static/vip-button.png') no-repeat;
		background-size: 100% 100%;
	}

	.me-vip-button view {
		font-size: 28rpx;
		color: #211F37;
	}

	.me-container {
		margin-top: 9rpx;
		margin: 0 32rpx;
	}

	.me-list-item {
		background: #fff;
		border-radius: 12rpx;
	}

	.me-list-item>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.me-list-item>view+view {
		border-top: 1rpx solid #ccc;
	}

	.list-l {
		display: flex;
		padding: 37rpx 35rpx;
	}

	.list-l text {
		padding-left: 24rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.list-r {
		padding: 37rpx 20rpx;
	}

	.me-list-about>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.me-list-about {
		margin-top: 17rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	.me-list-out {
		margin-top: 26rpx;
		padding: 0 32rpx;
		line-height: 88rpx;
		align-items: center;
		text-align: center;
		background-color: #fff;
		border-radius: 12rpx;
	}

	.me-list-out view {
		font-size: 29rpx;
		color: #333333;
	}
</style>